{include file="public/header" select="0" /}
<body>
<div class="header">
    <i class="layui-icon layui-icon-left" onclick="load_href('{:url(\'user/index\')}',2)"></i> 我要充值
</div>
<div class="recharge-price">
    <img src="/static/index/img/icon21.png" alt="">
    <div>
        <p>{:get_pay_way('balance')}</p>
        <p class="num">￥<span>{$user->assets->balance}</span></p>
    </div>
</div>
<form action="{:url('remit/save')}" method="post" class="form layui-form">
    <input type="hidden" name="account" value="balance">
    <input type="hidden" name="pay_way" id="pay_way" value="银行卡">
    <div class="recharge-title">支付方式</div>
    <ul class="recharge-nav flex-layout">
        <li class="active" data-type="银行卡">
            <p class="flex-center">
                <img src="/static/index/img/icon17.png" alt="">
            </p>
            <p>银行卡</p>
            <img src="/static/index/img/icon22.png" alt="" class="img">
        </li>
        <li data-type="微信">
            <p class="flex-center">
                <img src="/static/index/img/icon3.png" alt="">
            </p>
            <p>微信</p>
            <img src="/static/index/img/icon22.png" alt="" class="check-img img">
        </li>
        <li data-type="支付宝">
            <p class="flex-center">
                <img src="/static/index/img/icon4.png" alt="">
            </p>
            <p>支付宝</p>
            <img src="/static/index/img/icon22.png" alt="" class="check-img img">
        </li>
    </ul>
    <div class="recharge-bank">
        <p>
            <span id="copy">{:cache('system')['remit_bank_number']}</span>
            <span class="copy" data-clipboard-target="#copy" style="color: #ec1b24">复制</span>
        </p>
        <div>
            <p class="flex-center">
                <img src="/static/index/img/icon17.png" alt="">
            </p>
            <span>{:cache('system')['remit_bank_name']} | {:cache('system')['remit_bank_account']}</span>
        </div>
        <div>
            <span>{:cache('system')['remit_bank_open']}</span>
        </div>
    </div>
    <div class="recharge-imgs flex-center recharge-wechat" style="display:none;">
        <p class="flex-center">
            <img src="{:cache('system')['remit_wechat']}" class="remit_images" alt="">
        </p>
        <p>请扫码支付</p>
    </div>
    <div class="recharge-imgs flex-center recharge-alipay" style="display:none;">
        <p class="flex-center">
            <img src="{:cache('system')['remit_alipay']}" class="remit_images" alt="">
        </p>
        <p>请扫码支付</p>
    </div>
    <ul class="recharge-acc-list">
        <li>
            <p>充值金额</p>
            <div>￥
                <input type="number" name="amount" lay-verify="required" lay-reqtext="请输入充值金额"
                       placeholder="请输入充值金额，{:cache('system')['remit_min']}起充" autocomplete="off"
                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
            </div>
        </li>
        <li>
            <p>充值凭证</p>
            <div class="uploads_image" id="uploads_image">
                <img src="/static/index/img/icon15.png" alt="" id="image_show">
            </div>
            <input type="hidden" name="images" id="images_value" lay-verify="required" lay-reqtext="请上传充值凭证"
                   placeholder="请上传充值凭证"/>
        </li>
    </ul>
    <p class="save upd-save" lay-submit lay-filter="save" formObj=".form">申请充值</p>
</form>
<div class="flex-center">
    <a href="{:url('remit/record')}" class="transfer-rec">充值记录
        <img src="/static/index/img/icon20.png" alt="">
    </a>
</div>
{include file="public/footer" select="0" /}
<script src="/static/index/js/clipboard.min.js"></script>
<script>
    $('.copy').click(function() {
        var clipboard = new ClipboardJS('.copy');
        clipboard.on("success",function(e){
            e.clearSelection();
            layer.msg('复制成功')
        });
        clipboard.on("error",function(e){
            layer.msg('复制失败')
        });
    });

    $('.recharge-nav li').click(function() {
        var type = $(this).attr('data-type');
        switch (type) {
            case "银行卡":
                $('.recharge-bank').show();
                $('.recharge-alipay').hide();
                $('.recharge-wechat').hide();
                break;
            case "微信":
                $('.recharge-wechat').show();
                $('.recharge-bank').hide();
                $('.recharge-alipay').hide();
                break;
            case "支付宝":
                $('.recharge-alipay').show();
                $('.recharge-bank').hide();
                $('.recharge-wechat').hide();
                break;
            default:
                $('.recharge-bank').hide();
                $('.recharge-alipay').hide();
                $('.recharge-wechat').hide();
        }
        $('#pay_way').val(type);
        $(this).addClass('active').siblings().removeClass('active')
        $(this).find('.img').show().parent().siblings().find('.img').hide()
    });

    $('.remit_images').click(function () {
        DataHtml('收款码', $(this).attr('src'))
    });

    function DataHtml(name, url) {
        $("#displayimg").attr("src", url);
        var height = $("#displayimg").height();
        var width = $("#displayimg").width();
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: [width + 'px', 'auto'], //宽高
            content: "<img style='width: 100%' alt=" + name + " title=" + name + " src=" + url + " />"
        });
    }
</script>
</body>
</html>